<template>
  <div class="div1">
    <h2>通过attrs传递属性</h2>
    <p>{{ a }}</p>
    <p>{{ b }}</p>
    <p>{{ c }}</p>
    <p>{{ d }}</p>
    <!-- 
    
     v-bind= "data1"
    -->
    <TongXin5Child1 :a="a" :b="b" :c="c" :d="d" 
    v-bind="{ x: '100', y: '200' }"
    :updateD="updateD"
     />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TongXin5Child1 from './TongXin5Child1.vue';

let a = ref(1)
let b = ref('2')
let c = ref('3')
let d = ref(4)
interface Data1{
  x: string,
  y: number,
}
const data1 = ref<Data1>({
  x: '100',
  y: 200,
})
const updateD = (value: number) => {
  d.value += value
}
</script>
<style lang="scss" scoped>
.div1 {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;
}
</style>
